<template>
  <div>
    <p>
      理解模块<br />
    </p>
    <el-button type="primary" @click="learnModule">learnModule</el-button>
    <el-divider></el-divider>

  </div>
</template>

<script>
export default {
  methods: {
    learnModule () {
      let module = (function () {
        //模块列表集合
        const moduleLists = {};
        function define (name, modules, action) {
          modules.map((m, i) => {
            modules[i] = moduleLists[m];
          });
          //执行并保存模块，apply是数组传参
          moduleLists[name] = action.apply(null, modules);
        }
        // 返回一个对象，对象里面有define这个方法
        return { define: define };
      })();

      //声明模块不依赖其它模块
      // moduleLists.hd = {show: show...}
      module.define("hd", [], function () {
        return {
          show () {
            console.log("hd module show");
          }
        };
      });

      // moduleLists.hello = {show: show...}
      module.define("hello", [], function () {
        return {
          show () {
            console.log("hello");
          }
        };
      });

      //声明模块时依赖其它模块
      // moduleLists.xj = undefined
      // 然后这里回调方法根据apply的数组传参，分别入参
      module.define("xj", ["hd", "hello"], function (hd, hello) {
        hd.show();
        hello.show();
      });
    }
  }
}
</script>

<style lang="less" scoped>
p {
  line-height: 30px;
}
</style>